<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="jie">
  <title>数据库备份工具-{{.Type}}{{if eq .Type "client"}}-{{.DBType}}{{end}}</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/static/bootstrap.min.css">
  <link rel="stylesheet" href="/static/common.css">
  <script src="/static/jquery-3.5.1.min.js"></script>
  <script src="/static/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container d-flex justify-content-between">
        <a href="/" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
            viewBox="0 0 24 24" focusable="false">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
            <circle cx="12" cy="13" r="4" /></svg>
          <strong>数据库备份工具-{{.Type}}{{if eq .Type "client"}}-{{.DBType}}{{end}}</strong>
        </a>
      </div>
    </div>
  </header>
  
  <main role="main" style="margin-top: 30px">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <form>

          <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>

          <div class="alert alert-success" style="display: none;">
            <strong id="resultMsg">保存成功</strong>
          </div>

          <div class="portlet">
            <h5 class="portlet__head">备份设置</h5>
            <div class="portlet__body">
              {{if eq .Type "client"}}
              <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  {{range $i, $v := .BackupConfig}}
                  <a class="nav-item nav-link {{if eq $i 0}}active{{end}}" id="id_{{$i}}" data-toggle="tab" href="#content_{{$i}}" role="tab">
                    {{if eq $v.ProjectName ""}}
                    {{$i}}
                    {{else}}
                    {{$v.ProjectName}}
                    {{end}}
                  </a>
                  {{end}}
                </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                {{range $i, $v := .BackupConfig}}
                <div class="tab-pane fade {{if eq $i 0}}show active{{end}}" id="content_{{$i}}" role="tabpanel">
                  <br/>
                  <div class="form-group row">
                    <label for="ProjectName_{{$i}}" class="col-sm-2 col-form-label">项目名称</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="ProjectName" id="ProjectName_{{$i}}" rows="3" value="{{$v.ProjectName}}" onchange="projectNameChange(this)" aria-describedby="ProjectName_help">
                      <small id="ProjectName_help" class="form-text text-muted">请输入项目名称，一般取数据库名称，并确保名称不重复</small>
                    </div>
                  </div>
            
                  <div class="form-group row">
                    <label for="Command_{{$i}}" class="col-sm-2 col-form-label">备份脚本</label>
                    <div class="col-sm-10">
                      <textarea class="form-control" name="Command" id="Command_{{$i}}" rows="3" aria-describedby="Command_help">{{$v.Command}}</textarea>
                      <small id="Command_help" class="form-text text-muted">
                        {{if eq $.DBType "postgres"}}
                        例：PGPASSWORD="password" pg_dump --host 192.168.1.11 --port 5432 --dbname db-name --user postgres --clean --create --file #{DATE}.sql
                        {{else if eq $.DBType "mysql5"}}
                        例：mysqldump -h192.168.1.11 -uroot -p123456 db-name > #{DATE}.sql
                        {{else if eq $.DBType "mysql8"}}
                        例：mysqldump -h192.168.1.11 -uroot -p123456 db-name > #{DATE}.sql
                        {{else}}
                        没有数据库类型请添加
                        {{end}}
                      </small>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label for="SaveDays_{{$i}}" class="col-sm-2 col-form-label">保存天数</label>
                    <div class="col-sm-10">
                      <input type="number" class="form-control" name="SaveDays" id="SaveDays_{{$i}}" value="{{$v.SaveDays}}" min="1">
                    </div>
                  </div>

                </div>
                {{end}}
              </div>
              {{end}}

            </div>
          </div>

          <div class="portlet">
            <h5 class="portlet__head">服务配置</h5>
            <div class="portlet__body">
              <input type="hidden" value="{{.Type}}">

              <div class="form-group row">
                <label for="Username" class="col-sm-2 col-form-label">登录用户名</label>
                <div class="col-sm-10">
                  <input class="form-control" name="Username" id="Username" value="{{.Username}}" aria-describedby="Username_help">
                  <small id="Username_help" class="form-text text-muted">客户端和服务端需保持一致, 建议输入</small>
                </div>
              </div>

              <div class="form-group row">
                <label for="Password" class="col-sm-2 col-form-label">登录密码</label>
                <div class="col-sm-10">
                  <input class="form-control" type="password" name="Password" id="Password" value="{{.Password}}" aria-describedby="password_help">
                  <small id="password_help" class="form-text text-muted">客户端和服务端需保持一致，建议输入</small>
                </div>
              </div>

              <div class="form-group row">
                <label for="UploadURL" class="col-sm-2 col-form-label">二次备份接口</label>
                <div class="col-sm-10">
                  <input class="form-control" name="UploadURL" id="UploadURL" value="{{.UploadURL}}" aria-describedby="UploadURL_help">
                  <small id="UploadURL_help" class="form-text text-muted">
                    {{if eq .Type "client"}}
                    填写服务端提供的地址，可不填写
                    {{else}}
                    服务端提供的地址，在client填写此接口
                    {{end}}
                  </small>
                </div>
              </div>

            </div>
          </div>

          <div class="portlet">
            <h5 class="portlet__head">通知设置</h5>
            <div class="portlet__body">

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="BackupSuccessNotice" name="BackupSuccessNotice" {{if eq .BackupSuccessNotice true}}checked{{end}}>
                <label class="form-check-label" for="BackupSuccessNotice">备份成功通知</label>
              </div>

              <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link active" id="notice_dingding" data-toggle="tab" href="#notice_content_dingding" role="tab">
                    钉钉智能群助手
                  </a>
                  <a class="nav-item nav-link" id="notice_email" data-toggle="tab" href="#notice_content_email" role="tab">
                    Email
                  </a>
                </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">

                <div class="tab-pane fade show active" id="notice_content_dingding" role="tabpanel">
                  <br/>
                  <div class="form-group row">
                    <label for="WebHook" class="col-sm-2 col-form-label">WebHook</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="WebHook" id="WebHook" value="{{.WebHook}}">
                      <small id="WebHook_help" class="form-text text-muted">
                        钉钉电脑端->群设置->智能群助手->添加机器人->自定义
                      </small>
                    </div>
                  </div>
    
                  <div class="form-group row">
                    <label for="Secret" class="col-sm-2 col-form-label">安全设置->加签</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="Secret" id="Secret" value="{{.Secret}}">
                      <small id="Secret_help" class="form-text text-muted">
                        只需勾选加签
                      </small>
                    </div>
                  </div>
                </div>

                <div class="tab-pane fade" id="notice_content_email" role="tabpanel">
                  <br/>
                  <div class="form-group row">
                    <label for="NoticeEmail" class="col-sm-2 col-form-label">接收人Email</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="NoticeEmail" id="NoticeEmail" value="{{.NoticeEmail}}">
                      <small id="NoticeEmail_help" class="form-text text-muted">多个使用,分隔</small>
                    </div>
                  </div>
    
                  <div class="form-group row">
                    <label for="SMTPHost" class="col-sm-2 col-form-label">SMTP Host</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="SMTPHost" id="SMTPHost" value="{{.SMTPHost}}">
                    </div>
                  </div>
    
                  <div class="form-group row">
                    <label for="SMTPPort" class="col-sm-2 col-form-label">SMTP Port</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="SMTPPort" id="SMTPPort" value="{{.SMTPPort}}">
                    </div>
                  </div>
    
                  <div class="form-group row">
                    <label for="SMTPUsername" class="col-sm-2 col-form-label">SMTP Username</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="SMTPUsername" id="SMTPUsername" value="{{.SMTPUsername}}">
                    </div>
                  </div>
    
                  <div class="form-group row">
                    <label for="SMTPPassword" class="col-sm-2 col-form-label">SMTP Password</label>
                    <div class="col-sm-10">
                      <input class="form-control" name="SMTPPassword" id="SMTPPassword" value="{{.SMTPPassword}}">
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </div>

          <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>

        </form>
      </div>

      <div class="col-md-3">
        <p class="font-weight-light text-break" style="margin-top: 115px;font-size: 13px;" id="logs"></p>
      </div>
    </div>

  </main>

  <script>

    $(function(){
      $(".submit_btn").on('click',function(e) {
        e.preventDefault();
        $('body').animate({ scrollTop: 0 }, 300);
        $.ajax({
          method: "POST",
          url: "/save",
          data: $('form').serialize(),
          success: function (result) {
            $('.alert').css("display", "block");
            if (result !== "ok") {
              $('.alert').addClass("alert-danger")
              $('#resultMsg').html(result)
            } else {
              // ok
              setTimeout(function(){
                $('.alert').css("display", "none");
              }, 3000)
            }
          },
          error: function(jqXHR) {
            alert(jqXHR.statusText);
          }
        })
      })

    })

    // projectNameChange
    function projectNameChange(that) {
      let id = $(that).attr("id").split("_")[1]
      $("#id_"+id).html($(that).val())
    }

    function clientCheckedFun() {
      document.getElementById("UploadURL").disabled = false
    }

    function serverCheckedFun() {
      document.getElementById("UploadURL").disabled = true
      document.getElementById("UploadURL").value = window.location.href + "upload"
    }

    var type = '{{$.Type}}'

    switch(type){
      case "server": {
        serverCheckedFun()
        break;
      }
      default: {
        clientCheckedFun()
        break;
      }
    }
  </script>

  <script>
    function getLogs() {
      $.get("/logs", function(result){
        $("#logs").html(result)
      })
    }
    getLogs()
    setInterval(getLogs, 5 * 1000)
  </script>

</html>